<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js"></script>
<script src="js/jquery.validator.js"></script>
<script src="js/jquery.corners.min.js"></script>
<title>最基本的验证</title>
<meta name="description" content="月影 jquery validator jquery表单验证检验插件 对于即使不懂JavaScript的前台美工，也可以在不编写JavaScript逻辑代码的情况下，实现强大的验证效果。结果投入使用后，　均达到了非常好的效果" />
<link href="skin.css" rel="stylesheet" type="text/css" />
<style>
.errorTip{
	background-image:url(images/access_disallow.gif);
	background-repeat:no-repeat;
	padding-left:16px;
}

.errorInput{
	background-color:#FFCC33;
}

.validTip{
	background-image:url(images/access_allow.gif);
	background-repeat:no-repeat;
	background-position:left top ;
	padding:2px;
}
</style>
</head>

<body>
<div class="item">
	<div class="title">基本检验 不能为空</div>
<form id="myform1">
<input type="text" require="true" datatype="require" msg="此项不能为空" />
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform1').checkForm();
</script>
</div>

<div class="item">
	<div class="title">基本检验 电子邮件</div>
<form id="myform2">
<input type="text" require="true" datatype="email" msg="电子邮件地址要合法" />
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform2').checkForm();
</script>
</div>

<div class="item">
	<div class="title">基本检验 非必需项但非空时格式要正确</div>
<form id="myform3">
<input type="text" require="false" value="abc" datatype="email" msg="电子邮件格式错误" />
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform3').checkForm();
</script>
</div>


<div class="item">
	<div class="title">基本检验 字符串（密码输入一致）</div>
<form id="myform4">
<input type="text" name="pwd" require="true" value="" datatype="limit" min="3" max="8" msg="3至8位字符串" />
<br />
<input type="text" require="true" value="" datatype="repeat" to="pwd" msg="两次输入必须匹配" />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform4').checkForm();
</script>
</div>

<div class="item">
	<div class="title">基本检验 range属性</div>
<form id="myform5">
<input type="text" require="true" value="" datatype="range" min="18" max="60" msg="18到60之间的数字" />
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform5').checkForm();
</script>
</div>

<div class="item">
	<div class="title">基本检验 compare属性</div>
<form id="myform6">
<input require="true" datatype="compare" compare=">100" msg="请输入大于100的数" /><br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform6').checkForm();
</script>
</div>


<div class="item">
	<div class="title">基本检验 group属性(必须选中2至5个)</div>
<form id="myform7">
<input type="checkbox" name="chk[]" /> 旅游
<input type="checkbox" name="chk[]" /> 网络
<input type="checkbox" name="chk[]" /> 音乐
<input type="checkbox" name="chk[]" /> 读书
<input type="checkbox" name="chk[]" /> 交友
<input type="checkbox" name="chk[]" /> 养花
<input type="checkbox" name="chk[]" require="true" datatype="group" min="2" max="5" msgid="fav" msg="必须选中2至5个选项" /> 运动
<div id="fav"></div>
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform7').checkForm();
</script>
</div>


<div class="item">
	<div class="title">基本检验 下拉框必须选中</div>
<form id="myform8">
<select require="true" datatype="require" msg="必须选中某一项">
<option value="">请选择一项</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform8').checkForm();
</script>
</div>


<div class="item">
	<div class="title">自定义正则（只能上传png|jpg|jpeg|gif）</div>
<form id="myform9">
<input type="file" require="true" datatype="custom" regexp=".+\.(jpg|jpeg|jpg|gif)$" msg="只能上传jpg|jpeg|jpg|gif文件"/>
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform9').checkForm();
</script>
</div>

<div class="item">
	<div class="title">普通验证与ajax验证组合</div>
<form id="myform10">
<input type="text" name="username" require="true" datatype="userName|ajax" url="./ajax.php?action=check" msg="请输入合法的用户名|用户名已经被占用了"/>
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform10').checkForm();
</script>
</div>

<div class="item">
	<div class="title">指定msg显示的DOM元素</div>
<form id="myform11">
<input type="text" require="true" datatype="require" msgid="tip" msg="不能为空的!"/>
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform11').checkForm();
</script>
</div>
<div id="tip"></div>
<hr size="0" />

powered by zhangxugg@163.com   &nbsp;  <a target="_blank" href="http://www.zhixinku.com/zhangxu">http://www.zhixinku.com/zhangxu</a>

<script>
$('.item').corners('5px');
$('.showsource').click(function () {
	var s = $(this).parents('.item').find('textarea');
	var showed = s.attr('showed');
	if(showed=='0') {
		var str = $(this).parents('form');
		s.val(jQuery.trim(str.html())).fadeIn(500);
		s.attr({showed:'1'});
	} else {
		s.slideUp(500);
		s.attr({showed:'0'});
	} 
});

$('.item textarea').hide();
</script>
</body>
</html>
